<template>
	<div>
		<div class="header">
			<van-cell size="large">
				<div slot="icon" class="iconko" @click="fanhui">
					<van-icon name="arrow-left" />
				</div>
				<div slot="title" class="cellbox">我的收货地址</div>
			</van-cell>

		</div>
       <div style="margin-top: 50px;"></div>
		<div>
			<van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit"  @select="onSelect"/>
		</div>
	</div>
</template>

<script>
	import {
		AddressList
	} from 'vant';
	import {
		Cell,
		CellGroup
	} from 'vant';
	import {
		Toast
	} from 'vant';
	import {
		Icon,
		Tag
	} from 'vant';
	
	export default {
		data() {
			return {
				chosenAddressId:1,
				list: [],
			};
		},
		created() {
			this.$get(this.$API.USERS_CONTECT,
				{
					 userId:this.$store.state.nameId.userid
				}
			).then(res=>{
				console.log(res)
				for(let i=0;i<res.data.length;i++){
					this.list.push({
						tel:res.data[i].mobile,
						id:res.data[i].id,
						name:res.data[i].name,
						address:res.data[i].address,
						isDefault:res.data[i].contact_flag
					})
					this.chosenAddressId=res.data[i].contact_flag
				  console.log(this.chosenAddressId)
				}
			}).catch(err=>{
				console.log(err)
			})
			console.log(this.list)
			
		},
		methods: {
			onAdd() {
				Toast('新增地址');
				this.$router.push({name:'xiugaidizhi'})
			},
			onEdit(item, index) {
				Toast('编辑地址:' + index);
				this.$router.push({name:'xiugaidizhi',params:{id:item.id}})
			},
			fanhui() {
				// this.$router.push({path:'/queren'})
				// this.$router.push({path:'/my'})
				this.$router.go(-1)
			},
			// 地址切换选中触发
			onSelect(e){
				console.log(e)
				localStorage.setItem('address',JSON.stringify(e))
				 setTimeout(()=>{
					 this.$router.go(-1)
				 },300)
			}

		},
		components: {
			[AddressList.name]: AddressList,
			[Toast.name]: Toast,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Icon.name]: Icon,
			[Tag.name]: Tag,
		}
	}
</script>

<style lang="less" scoped>
	.header .van-cell {
		box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
			
	}

	.cellbox {
		font-size: 15px;
		text-align: center;
	
	}

	.iconko {
		font-size: 20px;
	}

	/deep/.van-button--danger {
		color: #fff;
		background-color: #343434;
		border: 1px solid #343434;
	}

	/deep/.van-address-item .van-radio__icon--checked .van-icon {
		background-color: #343434;
		border-color: #343434;
	}

	/deep/.van-tag--danger {
		background-color: #343434;
	}
</style>
